<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>签到</title>
		<style type="text/css">
			input{border: 0 none;resize:none; outline:none;webkit-appearance:none;line-height:2;}
			input::-webkit-input-placeholder {color: #aaa;}
      input:focus {color: #333;}
			html,body{margin:0;padding:0;height:100%;background: url(img/bg.jpg) no-repeat; background-size: 100% 100%;}
			.qd-form{position: absolute;top:50%;left:50%;width:100%;transform:translate(-50%,-50%);text-align: center;}
			.qd-form p{padding:0 20%;}
			.yqd{color:#fff;font-size:20px;}
			.qd-form input{text-align:center;padding:5px 10px;font-size:16px;width:100%;box-sizing: border-box;background:rgba(255,255,255,.8)}
			.qd-form input:focus{background:#fff;}
			.qd-form .qd-btn{width:100px;height:100px;border-radius:100%;padding:10px;font-size:20px;background:#f00;border:6px solid #fff;color:#fff;outline: none;box-shadow: 2px 5px 10px rgba(0,0,0,.5);}
		</style>
	</head>
	<body>
		<div class="qd-form" id="unsign" style="display: none">
			<p><input placeholder="请输入你的姓名..." type="text" name="" id="name" value=""/></p>
			<p><button class="qd-btn" onclick="singin();">签到</button></p>
		</div>
		<div class="qd-form" id="signed" style="display: none">
			<p class="yqd">您已签到！</p>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
	<script>
		var user;
		init();
		function init() {
           var code = getUrlParam('code');
           if(code){
               judge(code);
		   }
        }
        //获取url中的参数
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r != null) return unescape(r[2]); return null; //返回参数值
        }

		function judge(code) {
            //判断是否已签到
            $.ajax({
                //几个参数需要注意一下
                type: 'POST',//方法类型
                async: false,
                dataType: "json",//预期服务器返回的数据类型
                url: "/wx/issign" ,//url
				data:{code:code},
                success: function (res) {
                    if(res.status == 200){
                        if(res.data){
                            $('#unsign').css('display','block');
                            user = res.data;
						}else {
                            $('#signed').css('display','block');
                        }
                    }else {
                        alert(res.msg)
					}
                }
            });
        }
        //签到
       function singin() {
		  var name = $('#name').val();
           if(!name){
             alert('请输入姓名');
             return
           }
           $.ajax({
               //几个参数需要注意一下
               type: 'POST',//方法类型
               async: true,
               dataType: "json",//预期服务器返回的数据类型
               url: "/wx/signin" ,//url
               data:{
                   name:name,
                   openId:user.openid,
                   accessToken:user.access_token
			   },
               success: function (res) {
                   if(res.status == 200){
                       alert('签到成功，请等待抽奖')
                       $('#unsign').css('display','none');
					   $('#signed').css('display','block');
                   }else {
                       alert(res.msg)
                   }
               }
           });
       }
	</script>
</html>
